<template>
  <transition enter-active-class="animated rotateIn">
    <div id="login">
      <el-carousel :interval="30000" loop height="100%" >
        <el-carousel-item v-for="(item) in bcImg" :key="item.index">
          <el-image :src="item.img"></el-image>
        </el-carousel-item>
      </el-carousel>
      <transition name="el-zoom-in-bottom">
        <div class="info" v-show = formShow>
          <div id="title">
            <img id="loginP1" src="../../assets/img/login/titleChar1.png" alt="">
            <img id="loginP2" src="../../assets/img/login/titleChar2.png" alt="">
          </div>
          <el-form id="loginInput" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
            <el-form-item id="nameItem"  prop="username">
              <el-input prefix-icon="el-icon-user" id="uname" size="large" autocomplete="off" v-model.trim="loginForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item id="pwdItem"  prop="password">
              <el-input prefix-icon="el-icon-lock" id="pwd" type="password" size="large" show-password autocomplete="off" v-model.trim="loginForm.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item id="subItem">
              <el-button type="primary" round @click="Login('loginForm')">登录</el-button>
              <el-button type="primary" round @click="ToRegister">注册</el-button>
            </el-form-item>
          </el-form>
          <div id="foot">
            <p class="returnHome" @click="ToHome">点此返回首页</p>
            <p>欢迎登录食品营养查询平台</p>
          </div>
        </div>
      </transition>
      <transition name="slide-fade">
        <div id="confirm" v-show = confirmShow>
          <img id="rolling" alt="" src="../../assets/img/login/Rolling.gif">
          <p>正在认证中...</p>
        </div>
      </transition>
      <transition name="el-zoom-in-bottom">
        <div id="result" v-show = resultShow>
          <p>登录成功</p>
          <p>欢迎你</p>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>

  import bg1 from "../../assets/img/login/loginBac1.jpg"
  import bg2 from "../../assets/img/login/loginBac2.jpg"
  import bg3 from "../../assets/img/login/loginBac3.jpg"
  import {login} from "@/network/login/login"

  export default {
    name: "Login",
    data() {
      return {
        bcImg: [
          {img: bg2},
          {img: bg1},
          {img: bg3},
        ],
        loginForm: {
          username: '',
          password: '',
        },
        loginRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: false, message: '请输入密码', trigger: 'blur' },
          ]
        },
        formShow: true,
        resultShow: false,
        confirmShow: false,
      }
    },
    methods: {
      ToRegister() {
        this.$router.push('/register');
      },
      ToHome() {
        this.$router.push('/home')
      },
      Login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let username = document.getElementById('uname').value;
            let password = document.getElementById('pwd').value;
            // eslint-disable-next-line no-console
            console.log(username,password);
            this.formShow = false;
            this.confirmShow = true;
            setTimeout(() => {
              this.confirmShow = false;
              login(username, password).then(res => {
                // eslint-disable-next-line no-console
                console.log(res);
                // eslint-disable-next-line no-unused-vars
                if (res.ans === '1') {
                  let uid = res.uid;
                  let phone = res.phone;
                  let age = res.age;
                  let email = res.email;
                  let gender = res.gender;
                  let status = res.status;
                  if (gender === '1') {
                    gender = '女';
                  } else {
                    gender = '男';
                  }
                  if (status === '0') {
                    status = '管理员';
                  } else {
                    status = '注册用户';
                  }
                  // eslint-disable-next-line no-console
                  console.log(phone, age, email, gender);
                  setTimeout(() => {
                    this.resultShow = true;
                    setTimeout(() => {
                      this.$store.commit('setIsLogin', true);
                      this.$store.commit('setUid', uid);
                      this.$store.commit('setUserName', username);
                      this.$store.commit('setPassWord', password);
                      this.$store.commit('setPhone', phone);
                      this.$store.commit('setAge', age);
                      this.$store.commit('setEmail', email);
                      this.$store.commit('setGender', gender);
                      this.$store.commit('setStatus', status);
                      window.localStorage.setItem('loginJudge', 'true');
                      window.localStorage.setItem('uid', uid);
                      window.localStorage.setItem('userName', username);
                      window.localStorage.setItem('passWord', password);
                      window.localStorage.setItem('phone', phone);
                      window.localStorage.setItem('age', age);
                      window.localStorage.setItem('email', email);
                      window.localStorage.setItem('gender', gender);
                      window.localStorage.setItem('status', status);
                      this.$router.replace('/home');
                    }, 1000)
                  }, 300)
                } else {
                  setTimeout(() => {
                    this.formShow = true;
                    this.$alert('用户名密码错误', {
                      confirmButtonText: '确定',
                    });
                  },300)
                }
              }).catch(err => {
                // eslint-disable-next-line no-console
                console.log(err);
                alert("登录失败");
              })
            }, 1000);
          }
        })
      },
    }
  }
</script>

<style>
#loginInput .el-input__inner {
  background-color: rgba(0,0,0,0);
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin-left: 12px;
}
</style>

<style scoped>
  #login {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .el-carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .el-carousel .el-image {
    position: absolute;
    width: 100%;
  }
  .info{
    position: absolute;
    top: 8%;
    left: 36%;
    width: 28%;
    height: 85%;
    border-radius: 5px;
    /*padding-left: 4%;*/
    background: linear-gradient(230deg, rgba(53, 57, 74, 0.6) 0%, rgb(0, 0, 0) 90%);
    box-shadow: -10px 10px 10px rgba(6, 17, 47, 0.7);
  }
  #foot {
    position: absolute;
    bottom: 6%;
    width: 83%;
    height: 10%;
    left: 15%;
    color: #d3d7f7;
    font-size: 14px;
    border: 0;
  }
  #foot .returnHome {
    position: absolute;
    bottom: 10%;
    font-size: 12px;
    right: 5%;
    border: 0;
    color: #409EFF;
  }
  .el-form {
    position: relative;
    top: 20%;
    width: 100%;
    height: 70%;
  }
  .el-input {
    font-size: 15px;
    background-color: rgba(0,0,0,0);
  }
  #nameItem {
    position: relative;
    top: 30%;
    width: 62%;
    height: 60px;
    left: 15%;
    text-align: center;
  }
  #pwdItem {
    position: absolute;
    top: 45%;
    width: 62%;
    height: 60px;
    left: 15%;
    text-align: center;
  }
  #subItem {
    position: absolute;
    top: 65%;
    width: 80%;
    height: 60px;
    left: 10%;
  }
  #subItem .el-button {
    width: 30%;
    font-size: 16px;
    color: #409EFF;
    margin-left: 13%;
    border: 2px solid;
    background-color: rgba(0,0,0,0);
  }
  #confirm {
    position: absolute;
    top: 30%;
    left: 42%;
    width: 497px;
    height: 308px;
    /*padding-left: 4%;*/
    background: linear-gradient(230deg, rgba(53, 57, 74, 0.6) 0%, rgb(0, 0, 0) 90%);
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  }
  #confirm p {
    position: absolute;
    top: 38%;
    left: 35%;
    font-size: 26px;
    color: white;
  }
  #confirm #rolling {
    position: absolute;
    top: 20%;
    left: 8%;
    width: 15%;
  }
  .slide-fade-enter-active {
    transition: all 2s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter{
    transform: translateX(-20px);
    opacity: 0;
  }
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
  #result {
    position: absolute;
    top: 8%;
    left: 36%;
    width: 28%;
    height: 85%;
    text-align: center;
    /*padding-left: 4%;*/
    background: linear-gradient(230deg, rgba(53, 57, 74, 0.6) 0%, rgb(0, 0, 0) 90%);
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  }
  #result p {
    position: relative;
    top: 25%;
    /*left: 38%;*/
    font-size: 18px;
    margin-bottom: 30px;
    color: #dcdfe6;
  }
  #title {
    position: absolute;
    width: 100%;
    height: 30%;
    top: 5%;
  }
  #title #loginP1 {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 20%;
  }
  #title #loginP2 {
    position: absolute;
    width: 76%;
    top: 60%;
    left: 12%;
  }
</style>